<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>小程序管理系统</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  
  <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
  <style type="text/css">
  .layui-table{
    text-align: center;
  }
  .layui-table td, .layui-table th{
    text-align: center;
  }
  </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">

  <!--菜单列表-->
  <div id = "divhead"></div>
  <div class="layui-body">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
      <legend>充值记录</legend>
    </fieldset>

      <div id = "view"></div>
      <!--<div id="page-box"></div>-->
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
  </div>
</div>


<script id="common_tpl" type="text/html">
  <div style="display: flex;align-items: center;">
    合计：<th>{{d.num==null?0:d.num}}</th>
    <input type="text" class="layui-input" style = "width: 250px;margin-left: 30px;" id="start">

    <button class="search layui-btn layui-btn-small" style = "margin-left: 30px;">搜索</button>
    <button onclick='javascript:window.location.href={:U("daoChu")}' class="daoChu layui-btn layui-btn-small" style = "margin-left: 10px;">导出</button>
  </div>
  <table class="layui-table">
    <thead>
    <tr>
      <th>ID</th>
      <th>订单号</th>
      <th>价格</th>
      <th>用户昵称</th>
      <th>添加时间</th>
      <!--<th>操作</th>-->
    </tr>
    </thead>
    <tbody>
    {{#  layui.each(d.list, function(index, item){ }}
    <tr>
      <td>{{ item.oid }}</td>
      <td>{{ item.out_trade_no }}</td>
      <td>{{ item.price }}</td>

      <td>{{ item.nickname }}</td>
      <td>{{ item.ocreatetime }}</td>
      <!--<td style = "width:250px;">-->
        <!--<button data-id="{{ item.id }}" class="edit-book layui-btn layui-btn-small">编辑</button>-->
        <!--<button data-id="{{ item.id }}" class="del layui-btn layui-btn-small">删除</button>-->
        <!--{{#  if(item.type == 2 && item.status == 2){}}<button data-id="{{ item.id }}" class="fahuo layui-btn layui-btn-small">确认发货</button>{{#  } }}-->
      <!--</td>-->
    </tr>
    {{#  }); }}
    </tbody>
  </table>
  <div id="page-box"></div>
</script>

<script src="__PUBLIC__/layui/layui.js" charset="utf-8"></script>
<script src="__PUBLIC__/js/jquery-1.11.1.min.js" charset="utf-8"></script>
<script>
  $(function(){
      $('#divhead').load('/index.php/Tongcheng/Index/menu/wid/2.html');
  })
//JavaScript代码区域
layui.use(['element','laypage','laytpl','layer','laydate'], function(){
  var element = layui.element
          ,$ = layui.jquery
          ,layer = layui.layer
      ,laytpl = layui.laytpl
          ,laypage = layui.laypage,laydate = layui.laydate;
    var count = $("#count").val();


    $("#view").on('click', '.edit-book', function(event) {
      var id = $(this).data('id');
      layer.open({
          type: 2,
          title: '编辑商品',
          shadeClose: true,
          shade: false,
          maxmin: true, //开启最大化最小化按钮
          area: ['400px', '500px'],
          content: '{:U("edit")}?id='+ id
      });
  });
    $("#view").on('click', '.add', function(event) {
        var id = $(this).data('id');
        layer.open({
            type: 2,
            title: '添加',
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: ['400px', '500px'],
            content: '{:U("add")}'
        });
    });
    $("#view").on('click', '.search', function(event) {
        getList(1, 10);
    });
    $("#view").on('click', '.del', function(event) {
        var id = $(this).data('id');
        layer.confirm('你确定要删除？', {
            btn: ['确定','取消'] //按钮
        }, function(){
        $.get('{:U("del")}?id='+ id,function(e){
            if(1 == e){
                layer.alert('删除成功');
                setTimeout(function(){
                    location.reload();
                },1000);
            }else{
                layer.alert('删除失败');
            }
        })
        },function(){
        });
    });
    $("#view").on('click', '.daoChu', function(event) {
            // location.href='{:U("daoChu")}';
          window.open('/index.php/Tongcheng/CaiWuBack/daoChu');
    });


    getList(1, 10);

    function getList(page, limit){
        var time = $('#start').val();
        $.get("{:U('chongZhiJiLu')}?page="+page+"&limit="+limit+"&time="+time,function(data){
            var view = document.getElementById('view');
            var getTpl = common_tpl.innerHTML;
            laytpl(getTpl).render(data, function(html){
                view.innerHTML = html;
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#start',range: '~' ,format: 'yyyy-MM-dd'//指定元素
            });

            laypage.render({
                elem: 'page-box'
                ,count: data.count
                ,limit:limit
                ,curr: page
                ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                ,jump: function(obj, first){
                    console.log(obj)
                    if(!first){
                        getList(obj.curr, obj.limit);
                    }
                }
            });
        })
    }
});
</script>
</body>
</html>
